<html>
  <head lang="zh">
    <title>阿罗娜</title>
    <style>
      body {
        height: 100%;
        overflow: hidden;
        cursor: default;
      }
      /* 页样式 */
      .arona-page {
        position: relative;
        color: white;
        height: 100vh;
        font-family: sans-serif;
        overflow-y: hidden;
        overflow-x: hidden;
        display: flex;
        justify-content: center;
        align-items: center;
      }
      /* 阿罗娜场景容器，包含背景，Spine，图标 */
      .arona-scene-container {
        position: relative;
        z-index: 100;
        overflow: hidden;
        display: flex;
        justify-content: center;
        align-items: center;
      }
      /* 阿罗娜场景背景，控制高度 */
      .arona-backgroud {
        height: 35.666667rem;
      }
      /* 阿罗娜Spine容器 */
      .arona-container {
        position: absolute;
        height: 100%;
        left: 60%;
        top: 50%;
        z-index: 1;
        transform: translate(-50%, -50%);
      }
      /* --------------------------------------------------------
      指纹认证图标样式，包含动画 START
      ---------------------------------------------------------*/
      .arona-fp-icon {
        position: absolute;
        top: 16.6666666667rem;
        left: 37%;
      }
      @keyframes puff-out-center {
        0% {
          transform: scale(1) translate(-50%, -50%);
          transform-origin: 0% 0%;
          filter: blur(0px);
          opacity: 1;
        }
        to {
          transform: scale(2) translate(-50%, -50%);
          transform-origin: 0% 0%;
          filter: blur(4px);
          opacity: 0;
        }
      }

      .arona-fp-icon img:nth-child(1) {
        position: absolute;
        opacity: 0.8;
        top: 50%;
        left: 50%;
        transform: translate(-35%, 40%);
        z-index: 2;
        width: 3.1666666667rem;
        cursor: pointer;
      }

      .arona-fp-icon img:nth-child(2) {
        position: absolute;
        top: 45px;
        left: 5px;
        z-index: 1;
        width: 3.1666666667rem;
        animation: puff-out-center 2s infinite
          cubic-bezier(0.165, 0.84, 0.44, 1) both;
      }
    </style>
  </head>
  <body>
    <div class="arona-page">
      <div class="arona-scene-container">
        <div style="height: 100px"></div>
        <img
          src="https://webcnstatic.yostar.net/ba_cn_web/prod/web/assets/top_bg.b6c61b76.png"
          alt=""
          class="arona-backgroud"
        />
        <div id="arona-container" class="arona-container"></div>
        <div class="arona-fp-icon">
          <img
            alt=""
            src=""
          />
          <img
            alt=""
            src=""
          />
        </div>
      </div>
    </div>
    <script src="pixi.min.6.js"></script>
    <script src="pixi.spine.min.3.js"></script>
    <script>
      const app = new PIXI.Application({
        backgroundAlpha: 0,
        // backgroundColor: 0xffffff,
        antialias: true,
        width: document.documentElement.clientWidth,
        height: document.documentElement.clientHeight,
      });
      document.getElementById("arona-container").appendChild(app.view); //div
      let loader = app.loader.add(
        "https://webcnstatic.yostar.net/ba_cn_web/prod/web/pc/Arona/Arona.atlas",
        "https://webcnstatic.yostar.net/ba_cn_web/prod/web/pc/Arona/Arona.json"
      ); //OD.json你的json
      loader.load((loader, res) => {
        let arona = new PIXI.spine.Spine(res[Object.keys(res)[0]].spineData),
          options = [""];
        arona.scale.set(0.3);
        arona.state.setAnimation(0, "idle", true);
        arona.x = 1200 / 2;
        arona.y = 620;
        app.stage.addChild(arona);
      });
    </script>
  </body>
</html>
